<template>
  <div>
    <h2>我是App组件</h2>
    <div class="App">
      <Brother title="电影">
        <ul>
          <li>杀破狼</li>
          <li>美人鱼</li>
        </ul>
        <hr>
        <!--      1.写法一 -->
        <template v-slot:detail>
          <p>评论电影</p>
        </template>
      </Brother>

      <Brother title="音乐">
        <template v-slot:default>
          <ul>
            <li>晴天</li>
            <li>蒲公英的约定</li>
            <li>枫</li>
          </ul>
          <hr>
        </template>
        <!--      2.写法二 -->
        <template #detail>
          <button>查看更多音乐</button>
        </template>
      </Brother>

      <Brother title="数码">
        <template #default>
          <ul>
            <li>手机</li>
            <li>平板</li>
          </ul>
          <hr>
        </template>
        <template #detail>
          <h3>点击查看更多手机</h3>
        </template>
      </Brother>
    </div>
  </div>
</template>

<script>
import Brother from "@/components/Item";
export default {
  name: "App",
  components: {Brother}
}
</script>

<style scoped>
.App{
  display: flex;
  justify-content: space-around;
}
</style>